body {
    margin          : 0;
    padding         : 0;
    font-family     : sans-serif;
    background-size : cover;
    background-image: url('../images/bg.jpg');
    height          : 100vh;
    width           : 100vw;
    display         : flex;
    justify-content : center;
    align-items     : center;
}

.box {
    padding      : 40px;
    height       : 30%;
    width        : 20%;
    background   : rgba(0, 0, 0, 0.6);
    box-sizing   : border-box;
    box-shadow   : 10px 10px 15px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.box h2 {
    color     : #fff;
    padding   : 0;
    margin    : 0 0 30px;
    text-align: center;
}

.box .inputBox {
    position: relative;
}

.box .inputBox input {
    width         : 100%;
    padding       : 10px 0;
    font-size     : 16px;
    color         : #fff;
    margin-bottom : 30px;
    outline       : none;
    border        : none;
    background    : transparent;
    border-bottom : 1px solid #fff;
    letter-spacing: 1px;
}

.box .inputBox label {
    position      : absolute;
    top           : 0;
    left          : 0;
    font-size     : 16px;
    color         : #fff;
    padding       : 10px 0;
    pointer-events: none;
    transition    : 0.5s;
}

.box .inputBox input:focus~label,
.box .inputBox input:valid~label {
    top      : -20px;
    font-size: 14px;
    color    : #03a9f4;
}

input[type="button"] {
    background   : transparent;
    border       : none;
    outline      : none;
    color        : #fff;
    background   : #03a9f4;
    padding      : 8px 15px;
    cursor       : pointer;
    border-radius: 5px;
}